<template>
	<view class="content">
		<view class="head">
		</view>
		<view class="head1">
			<image class="bg-set1" :src="bgimage"></image>
			<view class="meng1"></view>
		</view>
		<view class="info">
			<view class="info-left">
				<image class="head-image" :src="icon_wuxing"></image>
			</view>
			<view class="info-right">
				<view class="title">
					{{name}}
				</view>
				<view class="info-detail">
					{{info}}
				</view>
			</view>
		</view>
		<view class="box">
			<uni-row class="box-row">
				<uni-col :xs="3">
					<view style="width: 30rpx;height: 20rpx;"></view>
				</uni-col>
				<uni-col :xs="4" v-for="(item,index) in types" style="display: flex;" class="box-box1">
					<view class="types">
						<view class="dian" :style="item.color"></view>
						<text class="box-row-text" :style="item.textColor">{{item.text}}</text>
					</view>
				</uni-col>
			</uni-row>
		</view>
		<view class="box-box">
			<uni-row class="box-row">
				<uni-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
					<view :style="boxCol1[index].style" class="box-box-box" v-for="(item,index) in boxCol1"
						@click="open(0,list[type][0][index],index)">
						<view :style="typeColors[list[type][0][index]].color" class="box-box-box-box">
							<text :style="boxCol1[index].textStyle">
								{{typeColors[list[type][0][index]].text}}
							</text>
						</view>
					</view>
				</uni-col>
				<uni-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
					<view :style="boxCol2[index].style" @click="open(1,list[type][1][index],index)" class="box-box-box1"
						v-for="(item,index) in boxCol2">
						<view :style="typeColors[list[type][1][index]].color" class="box-box-box-box" v-if="index!=3">
							<text :style="boxCol2[index].textStyle">
								{{typeColors[list[type][1][index]].text}}
							</text>
						</view>
					</view>
				</uni-col>
				<uni-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
					<view :style="boxCol3[index].style" @click="open(2,list[type][2][index],index)" class="box-box-box2"
						v-for="(item,index) in boxCol3">
						<view :style="typeColors[list[type][2][index]].color" class="box-box-box-box">
							<text :style="boxCol3[index].textStyle">
								<!-- {{list[type][2][index]}} -->
								{{typeColors[list[type][2][index]].text}}
							</text>
						</view>
					</view>
				</uni-col>
			</uni-row>
		</view>

		<uni-popup ref="popup" :mask-click="false" style="z-index: 100000000;">
			<view class="pop-view">
				<view class="pop-title">
					<image src="../../../../static/home/peizhuang/left-line.png" class="line-image"></image>
					<text class="title-text">装备属性</text>
					<image src="../../../../static/home/peizhuang/right-line.png" class="line-image"></image>
				</view>
				<view class="pop-title-close">
					<image class="close-btn" src="../../../../static/home/peizhuang/×.png" @click="close"></image>
				</view>
				<view class="pop-line"></view>
				<view class="pop-chose">
					<view class="pop-chose-c" v-for="(item,index) in typeColors" @click="selectTypeF(index)">
						<view :style="typeColors[index].color" class="s-item">
							<text :style="typeColors[index].textColor">{{item.text}}</text>
							<image class="selectImage" :src="src" v-if="index==selectType"></image>
						</view>
					</view>
				</view>
				<button type="default" @click="goto" class="btn">确认</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:1,
				name:"天王·刀天王",
				icon_wuxing:"",
				choose_type:0,
				selectTypeIndex:0,
				src: "../../../../static/home/peizhuang/select.png",
				bgimage: "../../../../static/home/menpai/emei.png",
				selectCol:0,
				selectIndex: 0,
				selectType:0,
				
				style: "",
				rolelist:[],
				list:[
					[
						[3,1,4,3],
						[2,0,4],
						[0,2,1]
					],
					[
						[0,4,2,0],
						[3,1,2],
						[1,3,4]
					],
					[
						[4,3,0,4],
						[1,2,0],
						[2,1,1]
					],
					[
						[2,0,1,2],
						[4,3,1],
						[3,4,0]
					],
					[
						[1,2,3,1],
						[0,4,3],
						[4,0,2]
					]
				],
				typeColors: [{
						color: "background: rgba(241, 239, 65, 0.2);border: 2px solid #F1EF41;",
						text: "金",
						textColor: "color: #8D8C0F;"
					},
					{
						color: "background: rgba(15, 221, 112, 0.2);border: 2px solid #0FDD70;",
						text: "木",
						textColor: "color: #0E8345;"
					},
					{
						color: "background: rgba(78, 124, 255, 0.2);border: 2px solid #4E7CFF;",
						text: "水",
						textColor: "color: #1C3FA4;"
					},
					{
						color: "background: rgba(255, 90, 0, 0.2);border: 2px solid #FF5A00;",
						text: "火",
						textColor: "color: #9F4616;"
					},
					{
						color: "background: rgba(254, 207, 179, 0.5);border: 2px solid #FECFB3;",
						text: "土",
						textColor: "color: #A95D30;"
					}
				],
				boxCol1: [{
						style: "width: 96rpx;height: 168rpx;margin-top: 200rpx;",
						textStyle: "color: #FFFFFF; width: 100%;height:100%; line-height:168rpx;"
					},
					{
						style: "width: 96rpx;height: 96rpx;margin-top: 40rpx;",
						textStyle: "color: #FFFFFF; width: 100%;height:100%; line-height:96rpx;"
					},
					{
						style: "width: 96rpx;height: 96rpx;margin-top: 40rpx;",
						textStyle: "color: #FFFFFF; width: 100%;height:100%; line-height:96rpx;"
					},
					{
						style: "width: 96rpx;height: 168rpx;margin-top: 40rpx;",
						textStyle: "color: #FFFFFF; width: 100%;height:100%; line-height:168rpx;"
					},
				],
				boxCol2: [{
						style: "width: 168rpx;height: 168rpx;margin-top: 80rpx;",
						textStyle: "color: #FFFFFF; width: 100%;height:100%; line-height:168rpx;"
					},
					{
						style: "width: 168rpx;height: 240rpx;margin-top: 40rpx;",
						textStyle: "color: #FFFFFF; width: 100%;height:100%; line-height:240rpx;"
					},
					{
						style: "width: 168rpx;height: 84rpx;margin-top: 40rpx;",
						textStyle: "color: #FFFFFF; width: 100%;height:100%; line-height:84rpx;"
					},
					{
						style: "width: 168rpx;height: 240rpx;margin-top: 40rpx;background: rgba(198, 184, 199, 0.2);border: 2px solid #5E515F;",
						textStyle: "color: #FFFFFF; width: 100%;height:100%; line-height:240rpx;"
					},
				],
				boxCol3: [{
						style: "width: 168rpx;height: 84rpx;margin-top: 200rpx;",
						textStyle: "color: #FFFFFF; width: 100%;height:100%; line-height:84rpx;"
					},
					{
						style: "width: 168rpx;height: 324rpx;margin-top: 40rpx;",
						textStyle: "color: #FFFFFF; width: 100%;height:100%; line-height:324rpx;"
					},
					{
						style: "width: 168rpx;height: 168rpx;margin-top: 40rpx;",
						textStyle: "color: #FFFFFF; width: 100%;height:100%; line-height:168rpx;"
					}
				],
				types: [{
						color: "background: #F07821;",
						text: "金",
						textColor: "color: #F07821;"
					},
					{
						color: "background: #0FDD70;",
						text: "木",
						textColor: "color: #0FDD70;",
					},
					{
						color: "background: #4E7CFF;",
						text: "水",
						textColor: "color: #4E7CFF;"
					},
					{
						color: "background: #FF5A00;",
						text: "火",
						textColor: "color: #FF5A00;"
					},
					{
						color: "background: #FECFB3;",
						text: "土",
						textColor: "color: #FECFB3"
					}
				],
				info: "活动期间，玩家可以通过礼包发放地址领取激活码。开服后大侠可在各大主城，新手村npc“龙儿”处输入激活码，即可兑换单思南新手礼包（自兑换起时限7天），开启礼。"
			}
		},
		onLoad(options) {
			switch(options.choose_type)
			{
				case "0": 
				case "1":
				{
					this.type = 0
					break;
				}
				case "2": 
				case "3":
				{
					this.type = 1
					break;
				}
				case "4": 
				case "5":
				{
					this.type = 2
					break; 
				}
				case "6": 
				case "7":
				{
					this.type = 3
					break;
				}
				case "8": 
				case "9":
				{
					this.type = 4
					break;
				}
			}
			this.choose_type = options.choose_type,
			this.selectTypeIndex =options.selectTypeIndex,
			this.rolelist =this.$Global.JobType,
			this.bgimage = options.name ? "../../../../static/home/menpai/" + options.name + ".png" :
				"../../../../static/home/menpai/emei.png"
			this.icon_wuxing = this.$Global.WuXing_Res[this.rolelist[this.choose_type].WX_type].res
			this.name = this.rolelist[this.choose_type].name+"·"+this.rolelist[this.choose_type].branch[this.selectTypeIndex]+this.rolelist[this.choose_type].name
		},
		methods: {
			open(col,witch,index) {
				if(col===1&&index===3)
				{
					
				}
				else
				{
					this.selectIndex = index
					this.selectCol = col
					this.selectType = witch
					// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
					this.$refs.popup.open("top")
				}
			},
			close() {
				this.$refs.popup.close()
			},
			goto() {
				var that = this;
				var i = 0;
				try{
					that.list.forEach(function(item,index) {
						if(item[that.selectCol][that.selectIndex] === that.selectType){
							throw new Error("find");
						}
						i=i+1;
					});
				}catch(e)
				{
					if(e.message != "find") throw e;
				}
				that.type = i;
				this.$refs.popup.close()
			},
			selectTypeF(index) {
				this.selectType = index
			}
		}
	}
</script>

<style>
	page {
		background-color: #1F282C;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.bottom {
		width: 100%;
	}

	.bg-set {
		position: fixed;
		width: 100%;
		height: 326rpx;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.head {
		display: flex;
		float: left;
		/* z-index: 10000; */
		width: 100%;
		height: 326rpx;
	}

	.meng {
		margin-top: 155rpx;
		width: 750rpx;
		height: 173rpx;
		background: linear-gradient(0deg, rgba(78, 100, 110, 0.8), rgba(78, 100, 110, 0.01));
	}
	
	.head1 {
	/* 		display: flex; */
			float: left;
			z-index: 1;
			width: 100%;
			height: 326rpx;
			margin-top: -326rpx;
			background-color: #1F282C;
		}
		.bg-set1 {
			/* position: fixed; */
			width: 100%;
			height: 326rpx;
			top: 0;
			left: 0;
			z-index: -1;
		}
		.meng1 {
			/* position: fixed; */
			/* margin-top: 68rpx; */
			margin-top: -180rpx;
			width: 750rpx;
			height: 173rpx;
			background: linear-gradient(0deg, rgba(78, 100, 110, 0.8), rgba(78, 100, 110, 0.01));
		}
	

	.top {
		left: ;
	}

	.info {
		display: flex;
		float: left;
		z-index: 10001;
		width: 90%;
		height: 200rpx;
		margin-top: -100rpx;
		background-color: #405C69;
		border-radius: 10px;
	}

	.head-image {
		height: 50rpx;
		width: 30rpx;
	}

	.info .info-left {
		width: 60rpx;
		height: 100%;
	}

	.info .info-right {
		overflow: hidden;
		padding-bottom: 20rpx;
		padding-right: 20rpx;
	}

	.info .info-right .title {
		margin-top: 16rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		font-weight: 400;
	}

	.info .info-right .info-detail {
		margin-top: 16rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		color: #A0AAAF;
		font-size: 24rpx;
		line-break: 3;

	}

	.box {
		height: 50rpx;
		display: flex;
		float: left;
		z-index: 10001;
		width: 90%;
		margin-top: 20rpx;
	}
	
	.box-box {
		width: 100%;
		text-align: center;
	}
	
	.box-row {
		width: 100%;
		height: 100%;
		float: left;
	}
	
	.uni-row{
		width: 100%;
	}

	.box .uni-row .types {
		height: 100%;
		min-width: 100rpx;
	}

	.dian {
		width: 14rpx;
		height: 14rpx;
		margin-top: 17rpx;
		border-radius: 50%;
		float: left;
	}



	.box-row-text {
		margin-left: 10rpx;
	}
	
	.box-box1 {
		margin-left: 0rpx;
	}

	.box-box-box {
		margin-left: 70rpx;
	}

	.box-box-box1 {
		margin-left: 20rpx;
	}

	.box-box-box2 {
		margin-left: 20rpx;
	}

	.box-box-box-box {
		width: 100%;
		height: 100%;
	}

	/* 弹出层 */
	.pop-view {
		margin-left: 85rpx;
		margin-right: 85rpx;
		height: 500rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 400rpx;
	}

	.pop-view .pop-line {
		width: 100%;
		height: 1px;
		background-color: #DDDDDD;
		margin-top: 40rpx;
	}

	.pop-view .pop-title {
		text-align: center;
		margin-top: 440rpx;
		padding-top: 40rpx;
		padding-right: 10rpx;
	}

	.pop-view .pop-title .title-text {
		font-size: 36rpx;
		color: #2FABD7;
	}

	.pop-view .pop-title .line-image {
		height: 24rpx;
		width: 30rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.pop-view .pop-title-close .close-btn {
		width: 29rpx;
		height: 29rpx;
		float: right;
		margin-top: -40rpx;
		margin-right: 40rpx;
	}

	.pop-view .btn {
		width: 226rpx;
		height: 80rpx;
		background-color: #57BEF2;
		border-width: 0px;
		color: #FFFFFF;
		line-height: 40px;
	}

	.pop-view .pop-chose {
		width: 100%;
		height: 250rpx;
		/* background-color: #0000FF; */
	}

	.pop-chose {
		width: 100%;
		float: left;
	}

	.chose-image-r {
		margin-top: 80rpx;
		width: 90rpx;
		height: 90rpx;
		margin-left: 138rpx;
	}

	.chose-image-l {
		margin-top: 80rpx;
		width: 90rpx;
		height: 90rpx;
		margin-left: 138rpx;
	}

	.pop-chose-c {
		float: left;
		margin-top: 80rpx;
	}

	.s-item {
		width: 96rpx;
		height: 90rpx;
		margin-left: 10rpx;
		line-height: 90rpx;
		text-align: center;
	}

	.selectImage {
		position: absolute;
		width: 30rpx;
		height: 30rpx;
		margin-top: 70rpx;
		margin-left: 10rpx;
	}
</style>
